import gradio as gr


def test(x, request: gr.Request):
    return request.query_params


# with gr.Blocks(css=".gradio-container {background-color: red}") as demo:
# js = "1"
js = ""
# js="console.log(123);"
with gr.Blocks(js=js) as demo:
    with gr.Accordion("show_i_box", open=False, elem_id='show_i_box'):
        i_box = gr.Textbox()

    o_box = gr.Textbox()
    btn = gr.Button()
    # btn.click(test, i_box, o_box, js="(x) =>{ x + ' foo'; console.log(222)}")
    btn.click(test, i_box, o_box, js='(x) =>{ var btn = document.getElementById("show_i_box").querySelector("button"); btn.click()}')

    # demo.load(js="(x) =>{console.log(333)}")

    dc = {
        'a': 1,
        'b': 2,
        'c': 3,
        'name': '博得'
    }
    import json
    _dc = json.dumps(dc)

    js = "(x) =>{console.log(333); document.dc = JSON.parse(\'" + _dc + "\')}"
    # js = "(x) =>{console.log(333); document.dc = JSON.parse('" + _dc + "')}"
    # js = "document.dc = JSON.parse('" + _dc + "')"
    # js
    # print(js)

    # document.dc

    # js = "(x) =>{console.log(333); document.dc = JSON.parse(" + _dc + ");"
    # " console.log('a', document.dc.a); console.log('name', document.dc.name)}",

    demo.load(fn=None, inputs=None, outputs=None,
              show_progress=False,
              trigger_mode='once',
              js=js,
              )

# demo = gr.Interface(test, "textbox", "textbox")
demo.launch()
# demo.launch(auth=("admin", "pass1234"))
